<template>
    <view class="content">
        <uv-popup ref="popup" :closeable="true" :custom-style="{borderRadius:'20rpx',maxWidth:'80%'}">
            <view class="flex px-20 py-50">
                <view v-if="coachInfo.avatar">
                    <uv-image width="80" height="80" :src="config.baseUrl + 'sys/common/static/' + coachInfo.avatar"
                        shape="circle"></uv-image>
                </view>
                <view v-else>
                    <uv-image v-if="coachInfo.sex==0" width="80" height="80" src="/static/男.jpg"
                        shape="circle"></uv-image>
                    <uv-image v-if="coachInfo.sex==1" width="80" height="80" src="/static/女.jpg"
                        shape="circle"></uv-image>
                </view>
                <view>
                    <uv-list padding="0rpx 30rpx">
                        <view class="fs-28 px-30 c-333333">
                            <uv-list-item>
                                <view class="fs-34 pb-5">姓名：{{coachInfo.name}}</view>
                            </uv-list-item>
                            <uv-list-item>
                                <view class="fs-34 pb-5">性别：{{coachInfo.sex==0?'男':'女'}}</view>
                            </uv-list-item>
                            <uv-list-item>
                                <view class="fs-34 pb-5">服务范围：{{coachInfo.cityCategoryId}}</view>
                            </uv-list-item>
                            <uv-list-item>
                                <view class="fs-34 ">驾龄：{{coachInfo.deYear}}年</view>
                            </uv-list-item>
                        </view>
                    </uv-list>
                </view>
            </view>
        </uv-popup>
        <view>
            <uv-swiper :list="list" height="240" radius="0"></uv-swiper>
        </view>
        <view>
            <uv-notice-bar :text="text" direction="column"></uv-notice-bar>
        </view>
        <view class="card bgc-ffffff">
            <view class="fs-34 fw-800 pb-20" style="color: #065adc;">金牌明星师傅</view>
            <uv-grid>
                <uv-grid-item v-for="item in star" :key="item.id" @click="getDetailInfo(item.id)">
                    <view class="flex flex-col items-center pb-20">
                        <view v-if="item.avatar">
                            <uv-image width="80px" height="80px"
                                :src="config.baseUrl + 'sys/common/static/' + item.avatar" shape="circle"></uv-image>
                        </view>
                        <view v-else>
                            <uv-image v-if="item.sex==0" width="80px" height="80px" src="/static/男.jpg"
                                shape="circle"></uv-image>
                            <uv-image v-if="item.sex==1" width="80px" height="80px" src="/static/女.jpg"
                                shape="circle"></uv-image>
                        </view>
                        <view class="fs-28 py-10">{{item.name}}</view>
                        <view class="fs-26 c-666666">驾龄：{{item.deYear}}年</view>
                    </view>
                </uv-grid-item>
            </uv-grid>
        </view>
        <!-- 当用户存在默认角色-->
        <view v-if="useAuthStore().userInfo.userType=='coach'">
            
            <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                style="background-color: #338cff;" @click="toOrder" v-if="useAuthStore().userInfo.coachFlag==1">
                <view class="flex items-center" style="margin-left: -30rpx;">
                    <view class="px-20">
                        <uv-icon name="car" color="#fff" size="38"></uv-icon>
                    </view>
                    <view class="fs-40">我要接单</view>
                </view>
            </view>
            <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                style="background-color: #338cff;" @click="updateData" v-if="useAuthStore().userInfo.coachFlag==0">
                <view class="flex items-center" style="margin-left: -30rpx;">
                <view class="px-20">
                    <uv-icon name="car" color="#fff" size="38"></uv-icon>
                </view>
                <view class="fs-40">陪练员资料审核中</view>
                </view>
            </view>
            <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                style="background-color: #338cff;" @click="apply(2)" v-if="useAuthStore().userInfo.coachFlag==2">
                <view class="flex items-center" style="margin-left: -30rpx;">
                <view class="px-20">
                    <uv-icon name="car" color="#fff" size="38"></uv-icon>
                </view>
                <view class="fs-40">陪练员审核失败，重新提交</view>
                </view>
            </view>
        </view>
        <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
            style="background-color: #338cff;" @click="toDrive" v-if="useAuthStore().userInfo.userType=='stu'">
           <view class="flex items-center" style="margin-left: -30rpx;">
            <view class="px-20">
                <uv-icon name="empty-address" color="#fff" size="38"></uv-icon>
            </view>
            <view class="fs-40">开始约驾</view>
            </view>
        </view>
        <!-- 当默认状态null时新用户-->
        <view v-if="useAuthStore().userInfo.userType==null">
            <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                style="background-color: #338cff;" @click="apply(1)" v-if="useAuthStore().userInfo.coachFlag==null">
               <view class="flex items-center" style="margin-left: -30rpx;">
                <view class="px-20">
                    <uv-icon name="account" color="#fff" size="38"></uv-icon>
                </view>
                <view class="fs-40">我要入驻（学员）</view>
                </view>
            </view>
            <!--教练角色认证中的不同阶段-->
            <view>
                <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                    style="background-color: #338cff;" @click="apply(2)" v-if="useAuthStore().userInfo.coachFlag==null">
                    <view class="flex items-center" style="margin-left: -30rpx;">
                    <view class="px-20">
                        <uv-icon name="empty-search" color="#fff" size="38"></uv-icon>
                    </view>
                    <view class="fs-40">我要入驻（陪练员）</view>
                    </view>
                </view>
                <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                    style="background-color: #338cff;" @click="apply(2)" v-if="useAuthStore().userInfo.coachFlag==1">
                    <view class="flex items-center" style="margin-left: -30rpx;">
                    <view class="px-20">
                        <uv-icon name="empty-search" color="#fff" size="38"></uv-icon>
                    </view>
                    <view class="fs-40">我要接单</view>
                    </view>
                </view>
                <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                    style="background-color: #338cff;" @click="updateData" v-if="useAuthStore().userInfo.coachFlag==0">
                    <view class="flex items-center" style="margin-left: -30rpx;">
                    <view class="px-20">
                        <uv-icon name="empty-search" color="#fff" size="38"></uv-icon>
                    </view>
                    <view class="fs-40">陪练员资料审核中</view>
                    </view>
                </view>
                <view class="card fs-35 py-50 c-ffffff text-center flex justify-center items-center"
                    style="background-color: #338cff;" @click="apply(2)" v-if="useAuthStore().userInfo.coachFlag==2">
                    <view class="flex items-center" style="margin-left: -30rpx;">
                    <view class="px-20">
                        <uv-icon name="empty-search" color="#fff" size="38"></uv-icon>
                    </view>
                    <view class="fs-40">审核失败，重新提交</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="card bgc-ffffff">
            <view class="flex items-center pb-20">
                <uv-icon name="question-circle-fill" color="#338cff" size="20"></uv-icon> 常见问题
            </view>
            <uv-list padding="8rpx 30rpx">
                <navigator style="display: inline-block"
                    url="/pages/question?url=https://go.yousanxia.com/static/aqsm.html&index=0">1、练习路段与安全事项说明
                </navigator>
                <navigator style="display: inline-block"
                    url="/pages/question?url=https://go.yousanxia.com/static/qxsm.html&index=1">2、取消订单说明</navigator>
                <navigator style="display: inline-block"
                    url="/pages/question?url=https://go.yousanxia.com/static/rypp.html&index=2">3、陪练人员匹配问题</navigator>
                <navigator style="display: inline-block"
                    url="/pages/question?url=https://go.yousanxia.com/static/tksm.html&index=3">4、退款说明</navigator>
            </uv-list>
        </view>
    </view>
    <!-- 底部导航-->
    <view>
        <uv-tabbar iconSize="30" :value="tabIndex" :custom-style="{padding:'12rpx 0'}">
            <uv-tabbar-item text="首页">
                <template v-slot:active-icon>
                    <image class="icon" src="/static/tabs/首页_h.png"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" src="/static/tabs/首页.png"></image>
                </template>
            </uv-tabbar-item>
            <!--教练角色-->
            <uv-tabbar-item text="接单" v-if="useAuthStore().userInfo.userType=='coach'" @click="receiving">
                <template v-slot:active-icon>
                    <image class="icon" src="/static/tabs/约驾_h.png"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" src="/static/tabs/约驾.png"></image>
                </template>
            </uv-tabbar-item>
            <!--学员角色-->
            <uv-tabbar-item text="约驾" v-if="useAuthStore().userInfo.userType=='stu'" @click="driving">
                <template v-slot:active-icon>
                    <image class="icon" src="/static/tabs/约驾_h.png"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" src="/static/tabs/约驾.png"></image>
                </template>
            </uv-tabbar-item>
            <uv-tabbar-item text="订单" @click="order" v-if="useAuthStore().userInfo.userType!=null">
                <template v-slot:active-icon>
                    <image class="icon" src="/static/tabs/订单_h.png"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" src="/static/tabs/订单.png"></image>
                </template>
            </uv-tabbar-item>
            <uv-tabbar-item text="我的" @click="my">
                <template v-slot:active-icon>
                    <image class="icon" src="/static/tabs/我的_h.png"></image>
                </template>
                <template v-slot:inactive-icon>
                    <image class="icon" src="/static/tabs/我的.png"></image>
                </template>
            </uv-tabbar-item>
        </uv-tabbar>
    </view>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import { onShow } from "@dcloudio/uni-app";
    import { useAuthStore } from "@/stores/auth.js"
    import { getCoachList, getBanner, getDetail, getCoachInfo } from "@/src/api/index.ts"
    import config from "@/src/config/index.ts"
    const list = ref([

    ])
    const text = ref();
    const tabIndex = ref(0);
    const star = ref('');
    const popup = ref(null);
    const coachInfo = ref('');
    const getDetailInfo = (id) => {
        getDetail({ id: id }).then(res => {
            popup.value.open();
            if (res.success) {
                coachInfo.value = res.result;
            }
        })
    }
    onShow(() => {
        tabIndex.value = 0;
        //获取banner
        getBanner({ "status": 0 }).then(res => {
            res.result.map(item => {
                list.value.push(config.baseUrl + 'sys/common/static/' + item.coverImage);
            })
        })
        //获取司机数据
        getCoachList().then(res => {
            star.value = res.result.slice(0, 6);
            let arrs = [];
            res.result.map(item => {
                arrs.push(item.name[0] + '**教练，成功入驻平台')
            })
            text.value = arrs;
        })
    })

    //刷新数据
    const updateData = () => {
        //检查审核状态
        getCoachInfo({ id: useAuthStore().userInfo.id }).then(res => {
            if (res.success) {
                if (res.result.statusFlag == '0') {
                    uni.showToast({
                        icon: "none",
                        title: "资料审核中，请耐心等待"
                    })
                }
                if (res.result.statusFlag == '1') {
                    uni.showToast({
                        icon: "none",
                        title: "资料审核通过"
                    })
                    //刷新token
                    useAuthStore().login().then(res => {
                        if (res) {
                            uni.navigateTo({
                                url: "/pages/order/orderPool"
                            })
                        }
                    })
                }
                if (res.result.statusFlag == '2') {
                    uni.showToast({
                        icon: "none",
                        title: "资料审核失败，请重新提交"
                    })
                    uni.navigateTo({
                        url: "/pages/apply/coach"
                    })
                }
            }
            console.log(res)
        })
        // useAuthStore().login().then(res => {
        //     if (res) {
        //         uni.showToast({
        //             icon: "none",
        //             title: "刷新成功"
        //         })
        //         btnLoading.value = false;
        //     }
        // })
    }
    const receiving = () => {
        uni.navigateTo({
            url: "/pages/order/orderPool"
        })
    }
    const driving = () => {
        uni.navigateTo({
            url: "/pages/appointment/index"
        })
    }
    const my = () => {
        uni.navigateTo({
            url: "/pages/my/index"
        })
    }
    const order = () => {
        //判断用户当前角色
        if (useAuthStore().userInfo.userType == null) {
            uni.showToast({
                title: "学员或教练角色才可查看",
                icon: 'none'
            })
            return false;
        }
        //教练
        if (useAuthStore().userInfo.userType == 'coach') {
            uni.navigateTo({
                url: "/pages/order/coach"
            })
        }
        //学员
        if (useAuthStore().userInfo.userType == 'stu') {
            uni.navigateTo({
                url: "/pages/order/stu"
            })
        }
    }
    // const goPage = (e) => {

    //     // if (e == 0) {
    //     //     uni.navigateTo({
    //     //         url: "/pages/index/index"
    //     //     })
    //     // }
    //     // if (e == 1) {

    //     // }
    //     if (e == 1) {
    //         //判断用户当前角色
    //         if (useAuthStore().currRole.value == 2) {
    //             uni.navigateTo({
    //                 url: "/pages/appointment/index"
    //             })
    //         } else {
    //             uni.showToast({
    //                 title: "学员角色才可约驾",
    //                 icon: 'none'
    //             })
    //             return false;
    //         }

    //     }
    //     //选择订单
    //     if (e == 2) {
    //         //判断用户当前角色
    //         if (useAuthStore().currRole.value == 0) {
    //             uni.showToast({
    //                 title: "学员或教练角色才可查看",
    //                 icon: 'none'
    //             })
    //             return false;
    //         }
    //         //教练
    //         if (useAuthStore().currRole.value == 1) {
    //             uni.navigateTo({
    //                 url: "/pages/order/orderPool"
    //             })
    //         }
    //         //学员
    //         if (useAuthStore().currRole.value == 2) {
    //             uni.navigateTo({
    //                 url: "/pages/order/stu"
    //             })
    //         }
    //     }
    //     if (e == 3) {
    //         //检查用户是否登录
    //         if (!authStore.isAuthenticated()) {
    //             uni.showModal({
    //                 title: "提示",
    //                 content: "需要登录后操作",
    //                 success: (res) => {
    //                     if (res.confirm) {
    //                         uni.navigateTo({
    //                             url: "/pages/login/index"
    //                         })
    //                     }
    //                 }
    //             })
    //             return false;
    //         }
    //         uni.navigateTo({
    //             url: "/pages/my/index"
    //         })
    //     }
    //     tabIndex.value = e;
    //     console.log(e)
    // }

    const authStore = useAuthStore();

    //入驻
    const apply = (type) => {
        if (type == 1) {
            uni.navigateTo({
                url: "/pages/apply/stu"
            })
        }
        if (type == 2) {
            uni.navigateTo({
                url: "/pages/apply/coach"
            })
        }
        // //检查用户是否登录
        // if (!authStore.isAuthenticated()) {
        //     uni.showModal({
        //         title: "提示",
        //         content: "需要登录后操作",
        //         success: (res) => {
        //             if (res.confirm) {
        //                 uni.navigateTo({
        //                     url: "/pages/login/index"
        //                 })
        //             }
        //         }
        //     })
        //     return false;
        // }
        // //判断用户当前角色
        // if (useAuthStore().userInfo.coachFlag == null) {
        //     uni.navigateTo({
        //         url: "/pages/apply/coach"
        //     })
        // }
        // if (useAuthStore().userInfo.coachFlag == 1) {
        //     uni.showToast({
        //         title: "您已经是教练了",
        //         icon: "none"
        //     })
        // }
    }
    //接单
    const toOrder = () => {
        uni.navigateTo({
            url: "/pages/order/orderPool"
        })
    }
    //约驾
    const toDrive = () => {
        uni.navigateTo({
            url: "/pages/appointment/index"
        })
        //检查用户是否登录
        // if (!authStore.isAuthenticated()) {
        //     uni.showModal({
        //         title: "提示",
        //         content: "需要登录后操作",
        //         success: (res) => {
        //             if (res.confirm) {
        //                 uni.navigateTo({
        //                     url: "/pages/login/index"
        //                 })
        //             }
        //         }
        //     })
        //     return false;
        // }
        // if (useAuthStore().userInfo.stuFlag == null) {

        //     return false;
        // } else {
        //     if (useAuthStore().currRole.value == 2) {
        //         uni.navigateTo({
        //             url: "/pages/appointment/index"
        //         })
        //     } else {
        //         uni.showToast({
        //             title: "请在个人中心角色切换为学员角色",
        //             icon: 'none'
        //         })
        //         return false;
        //     }
        // }


    }
</script>
<style scoped lang="scss">
    .icon {
        width: 55rpx;
        height: 55rpx;
    }

    navigator {
        padding-top: 4px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 4px;
        font-size: 15px;
        color: #3b4144;
    }

    .content {
        background-color: #f5f5f5;
        padding-bottom: 10rpx;

        .card {
            border-radius: 20rpx;
            width: 94%;
            margin: 20rpx auto;
            padding: 30rpx 20rpx;
            box-sizing: border-box;
        }
    }
</style>